/**
 *
 * Date: 2020/08/20 Time: 10:06
 *
 * 换房报表
 */

import React, {Component} from 'react';
import {
    Linking,
    SafeAreaView,
    ScrollView,
    TouchableOpacity,
    View,
    NativeModules,
    TouchableHighlight,
    Text,
    Platform,
    BackHandler,
    FlatList,
    ToastAndroid,TextInput
} from 'react-native';
import {connect} from 'react-redux';
import {styles} from './roomHistoryReport.Style';
import {FONT_COLOR_SUB_TITLE, FONT_COLOR_TITLE} from "../../../constant/PHColors";
import AntDesign from "react-native-vector-icons/AntDesign";
import SelectDatePlugIn from "../../custom/selectDateTime/selectDatePlugIn";
import {Row, Rows, Table} from 'react-native-table-component';
import { retrieveRoomHistory} from "./Actions"
import {FetchStatus} from "../../../configuration/RequestConfiguration";
import {ReturnStatus} from "../../../configuration/ReturnStatus";
import {doDisplayWarnMessage} from "../../../component/Message/Action";
import FontAwesome5 from "react-native-vector-icons/FontAwesome5";

class roomHistoryReport extends Component {
    static navigationOptions = ({navigation}) => ({
        headerTitle: ``,
        headerLeft: <View><Text style={{marginLeft:15,fontSize:18,color:FONT_COLOR_TITLE}}>房间历史</Text></View>,
        headerRight: '',
    });

    // 构造
    constructor(props) {
        super(props);

        // 初始状态
        this.state = {
            room:'',
            gno:'',
            reportData:[],
        };

        this.tableHeader = ["","状态","姓名","房间","抵店","抵店时间","离店","离店时间","人数","房数","价类","房价","换房","gno","pno","历史"];
        this.tableWidth = [70,50,100,80,100,90,100,90,70,80,80,80,150,80,80,80];
    }

    componentWillReceiveProps(nextProps, nextContext): void {
        let {dispatch} = this.props;
        if (nextProps.onRetrieveRoomHistory !== this.props.onRetrieveRoomHistory && nextProps.onRetrieveRoomHistory.fetchStatus === FetchStatus.Success) {
            if (nextProps.onRetrieveRoomHistory.RETURN === ReturnStatus.Success) {
                let rows = nextProps.onRetrieveRoomHistory.DATA;
                let data = [];
                rows.map((item,index)=>{
                    let data_son = [];
                    data_son.push(
                        <TouchableOpacity style={{width:50,height:30,marginLeft:10,flexDirection: 'row',justifyContent: 'center',alignItems: 'center'}} activeOpacity={0.8} onPress={()=>{
                            let {dispatch} = this.props;

                            this.props.navigation.navigate('GuestledgerScreen',{'gno':item.gno,'room':item.room,'chk_today':"yes",'chk_user':"yes"});
                        }}>
                            <View style={{width:50,height:30,flexDirection: 'row',justifyContent: 'center',alignItems: 'center',backgroundColor:'#6fb3e0'}}>
                                <Text style={{fontSize:16,color:'#fff'}}>
                                    跳转
                                </Text>
                            </View>
                        </TouchableOpacity>
                    );
                    data_son.push(item.statu_c);
                    data_son.push(item.gname);
                    data_son.push(item.room);
                    data_son.push(item.arr_d);
                    data_son.push(item.arr_t);
                    data_son.push(item.exp_dep_d);
                    data_son.push(item.exp_dep_t);
                    data_son.push(item.adults);
                    data_son.push(item.rooms);
                    data_son.push(item.rcode);
                    data_son.push(item.rate);
                    data_son.push(item.changeremark);
                    data_son.push(item.gno);
                    data_son.push(item.pno);
                    data_son.push(item.ishistory);
                    data.push(data_son)
                });
                this.setState({
                    reportData:data,
                })
                this.reportData = data;
            }else{
                dispatch(doDisplayWarnMessage(nextProps.onRetrieveRoomHistory.MSG))
            }
        }
    }

    componentWillMount() {

    };

    // 组件渲染后调用
    componentDidMount() {
        let {dispatch} = this.props;

    }

    render() {
        return (
            <SafeAreaView style={styles.body}>
                <View style={styles.opdateView}>
                    <Text style={{fontSize:16,marginLeft:20}}>
                    房号：
                    </Text>
                    <TextInput
                        placeholder={'请输入房号'}
                        style={{
                            fontSize: 16,
                            padding: 0,
                            flex:1,
                            color:(this.state.room===""||typeof (this.state.room)==='undefined')?'#f1f1f1':FONT_COLOR_TITLE,
                        }}
                        numberOfLines={1}
                        underlineColorAndroid={'transparent'}
                        onChangeText={text=>{
                            this.setState({
                                room:text
                            })
                        }}
                        defaultValue = {this.state.room}
                    />
                    <TouchableOpacity style={{width:70,height:40,right:0,position:'absolute',flexDirection: 'row',justifyContent: 'center',alignItems: 'center',backgroundColor:'#6fb3e0',fontcolor:'#fff'}} activeOpacity={0.8} onPress={()=>{
                        let {dispatch} = this.props;

                        let str = {"arg":{"current":"yes"},"where":{"room":this.state.room}}
                        dispatch(retrieveRoomHistory(JSON.stringify(str)));
                    }}>
                        <View style={{width:70,height:40,right:0,position:'absolute',flexDirection: 'row',justifyContent: 'center',alignItems: 'center',backgroundColor:'#6fb3e0',fontcolor:'#fff'}}>
                            <FontAwesome5 name={'search'} size={15} style={{marginRight: 5,color:'#fff'}}/>
                            <Text style={{fontSize:16,color:'#fff'}}>
                                查询
                            </Text>
                        </View>
                    </TouchableOpacity>

                </View>

                <ScrollView style={styles.body}>
                    <FlatList
                        data={[this.state.reportData]}
                        keyExtractor={(item, index) => index}
                        renderItem={this.renderTableItem}
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                    />
                </ScrollView>
            </SafeAreaView>
        )
    }

    renderTableItem=({item})=>{
        let _this = this;
        console.log("reportData-----------"+JSON.stringify(item));
        return(
            <Table style={{marginLeft: 0}}>
                <Row data={_this.tableHeader} widthArr={_this.tableWidth} style={styles.tableHeader} textStyle={styles.tableText}/>
                <Rows data={item} widthArr={_this.tableWidth} style={styles.tableHeader} textStyle={styles.tableText}/>
            </Table>
        )
    }
}

const props = state => {
    return {
        onRetrieveRoomHistory:state.onRetrieveRoomHistory
    }
};

export default roomHistoryReport = connect(props)(roomHistoryReport);